<template>
	<view class="content" :style="{marginTop:navHeaderHeight+'px'}">
		<!-- 头部 -->
		<!-- #ifndef H5 -->
			<header-navbar class="headerNavbar"></header-navbar>
		<!-- #endif -->
		<!-- 全选 以状态栏底部为起点,获得整个headerNavbar的高度,动态绑定值,撑开到指定位置-->
		<view class="chooseAllBox" :style="{top:navHeaderHeight-2+'px'}">
			<view class="chooseAll" @click="checkedAll">
				<!-- 利用属性hidden -->
				<image class='checkImg' :hidden="!allChecked"></image>
				<image class='checkImg' :hidden="allChecked" src='../../static/images/check.png'></image>
				<text class='checkText'>全选</text>
			</view>
			<!-- 默认编辑,点击变取消编辑 -->
			<view class="chooseAllEdit" @click="showEdit">{{editShow?'取消编辑':'编辑'}}</view>
		</view>
		<!-- 内容 -->
		<view class="safeArea">
			<!-- 如果没有商品显示这个提示的界面 v-if="" -->
			<block v-if="!haveGoods">
				<view class="emptyBox">
					<view class="cartAnimeBox">
						<image class="animate__animated animate__bounce animate__delay-4s" src="../../static/images/orderLogo.png"></image>
					</view>
					<view class="tips">
						<text>您还没有点单</text>
						<text>快去犒劳一下自己吧~</text>
					</view>
					<view class="goToOrderBox">
						<view class="goToOrder" @click="this.$Router.pushTab({name:'menu'})">
							去点餐
						</view>
					</view>

				</view>
			</block>
			<!-- 如果有商品,遍历 -->
			<block v-else>
				<view class="menuListScrollHidden">
					<scroll-view class="menuListScroll" scroll-y="true" show-scrollbar="false">
						<view>
							<!-- 一次循环 -->
							<block v-for="(item,index) in showGoodsList" :key="index">
								<view class='menuListBox'>
									<view class='productList'>
										<block>
											<view class='productItem'>
												<view class="productItemChoose" @click="itemChecked(index)">
													<!-- 无勾选 showGoodsList[index][0][0].checked==false-->
													<image v-if="!showGoodsList[index][0][0].checked"></image>
													<!-- 勾选 -->
													<image v-else src='../../static/images/check.png'></image>
												</view>
												<image :src='showGoodsList[index][0][0].goodsImg'></image>
												<view class="productAttr">
													<view class='productName'>{{showGoodsList[index][0][0].goodsName}}</view>
													<view class="productAbstract">{{showGoodsList[index][0][0].goodsContent}}</view>
													<view class="productBuy">
														<view class="productSize">{{userSelectSize}},{{userSelectTemp}},{{userSelectSugar}}</view>
														<view class="productPrice">
															x{{showGoodsList[index][0][0].num}}
															<!-- {{showGoodsList[index][0][0].num*showGoodsList[index][0][0].price}} -->
														</view>
													</view>
												</view>
											</view>
										</block>
									</view>
								</view>
							</block>
							<!-- 一次循环结束 -->
							</view>
					</scroll-view>
				</view>
			</block>
		</view>
		<!-- 底部总价 -->
		<!-- 默认显示结算盒子，除非用户点击了编辑按钮 -->
		<view class="EditBox" v-if="isEditBarShow">
			<text>移除商品</text>
			<navigator class="myfavorite" url='#' hover-class="none" open-type="">
				<text>我的收藏</text>
			</navigator>
		</view>
		<view class="TotalBox" v-else>
			<view class="Total">合计:<text>￥{{total}}</text></view>
			<view class="payBtn">结算</view>
		</view>
	</view>
</template>

<script>
	import HeaderNavbar from '../../components/HeaderNavbar.vue';
	import {navHeaderHeight} from '../../assets/js/navHeaderHeight.js';
	import {mapState} from 'vuex';
	import {_post} from '../../assets/js/req.js';
	import {url} from '../../assets/js/baseUrl.js';
	export default {
		name: 'cart',
		data() {
			return {
				editShow: false, //编辑按钮的默认参数
				isEditBarShow: false, //控制EditBox(移除商品,我的收藏)显示隐藏
				allChecked: true, //默认不全选(页面已取反)
				checked: false, //选择状态
				navHeaderHeight:null, //自定义导航条组件的高度(包含胶囊按钮和小程序标题的部分)
				haveGoods:false, //是否显示去购买的默认值(页面已取反)
				total:0, //总价
				showGoodsListSpace:[], //用于接住传递过来的所有商品(包括新加)的临时存放空间
				showGoodsList:[], //用于显示到页面的商品列表
				// allGoodsList:[], //
				// selectAllGoodsList:[],
			}
		},
		computed: {
		  ...mapState(['cartCount','catchAllGoodsId','userSelectSize','userSelectTemp','userSelectSugar']),
		},
		watch: {
			
		},
		components: {
			HeaderNavbar
		},
		methods: {
			// 全选
			checkedAll() {
				let that = this
				let allChecked=that.allChecked
				// 取反
				that.allChecked = !that.allChecked
				//判断是否全部都被选中
				let showGoodsList=that.showGoodsList
				for(let i=0;i<showGoodsList.length;i++){
					if(!allChecked){
						showGoodsList[i][0][0].checked=false
					}else{
						showGoodsList[i][0][0].checked=true
					}
					//全选金额
					if(allChecked){
						that.total+=showGoodsList[i][0][0].price*showGoodsList[i][0][0].num
					}else{
						that.total-=showGoodsList[i][0][0].price*showGoodsList[i][0][0].num
					}
					
				}
			},
			
			//点击 切换成编辑 的方法
			showEdit() {
				let that = this
				//that.editShow为true就是显示'取消编辑'
				//也就是为true时就显示EditBox(移除商品,我的收藏)显示
				that.editShow = !that.editShow
				//true
				if (that.editShow) {
					that.isEditBarShow = true
				} else {
					that.isEditBarShow = false
				}
			},
			
			//判断是否被选中
			itemChecked(index){
				let that=this
				//具体哪一项不选择
				let showGoodsListChecked=that.showGoodsList[index][0][0].checked
				let showGoodsList=that.showGoodsList
				that.showGoodsList[index][0][0].checked=!that.showGoodsList[index][0][0].checked
				
				//判断是否全部都被选中
				if(!showGoodsListChecked){
					that.allChecked=false
				}else{
					that.allChecked=true
				}
				
				if(!showGoodsListChecked){
					that.total+=showGoodsList[index][0][0].price*showGoodsList[index][0][0].num
				}else{
					that.total-=showGoodsList[index][0][0].price*showGoodsList[index][0][0].num
				}
			},
			
		
		},
		onShow() {
			// 头部导航栏
			let that=this
			that.navHeaderHeight=navHeaderHeight
			
			//商品显示数据
			let allGoodsList=[] //用于获取公共赋值
			let goodList=[] //用于分离公共复制的内容
			let goodListItem
			for(let i=0;i<that.catchAllGoodsId.length;i++){
				allGoodsList=that.catchAllGoodsId.reverse().splice(0,1)
				// allGoodsList.push(that.catchAllGoodsId)
				// allGoodsList.splice(0,1)
				goodList.push(allGoodsList)
				//具体某一项商品的id+数量
				goodListItem=goodList[0].pop().toString().slice(-6)
			}
			// 用于判断用户有没有添加商品,有就显示商品,没就显示啥也没有的页面
			if(!goodListItem){
				that.haveGoods=false//(页面已取反)
			}else{
				that.haveGoods=true//(页面已取反)
			}
			//拿到这个东西以后可以做数组去重和数据遍历然后加进新数组去渲染页面
			// console.log(goodListItem);
			// 分割原始数据 例1001/3 （id/数量）
			// let reg=/^\/$/;
			let goodListId
			let goodListCount
			if(goodListItem){
				let goodListId=(goodListItem.split("\/"))[0]
				let goodListCount=(goodListItem.split("\/"))[1]
			
			// console.log(goodListId);
			// console.log(goodListCount);
			
			//拉起请求
			let urls = url + '/goodsList'
			_post(urls).then((res) => {
				// console.log(res); //查看返回结果
				//接取所有商品数据
				// let that=this
				let allGoods = res.data.goodList
				//分离每项(把原数组内容分离)
				let selectedSpace=[]
				let selectedGood=[]
				// let allGoodsListSpace=[] 
				// let allGoodsListCatch=[]
				for (let goodsItem of allGoods) {
					//把分离好的每一项数据放入要显示到页面的商品数组(条件是根据我们点击项的id去找)
					for (let goods of goodsItem.goods) {
						if (goods.id == goodListId) {
							selectedSpace.push(goods) //用新数组接住每一项数据(如果符合条件)
						}
					}
				}
			
				selectedGood = [] //清空渲染数组里的数据(防止叠加)
				// console.log(goodsItem.goods);
				selectedGood.push(selectedSpace) //把获取到的数据放到渲染的数组里
				let allGoodsListSpace=JSON.parse(JSON.stringify(selectedGood))
				allGoodsListSpace[0][0].checked=false //把当前项改为选中状态
				// console.log(goodListCount);
				allGoodsListSpace[0][0].num=goodListCount
				// console.log(allGoodsListSpace[0][0]);
				selectedSpace = [] //清除通过条件获取的那个商品数据(防止叠加)
				// console.log(allGoodsListSpace);
				that.showGoodsListSpace.unshift(allGoodsListSpace)
				that.showGoodsList=that.showGoodsListSpace //多加一步看数据比较直观
				console.log(that.showGoodsList);
					
				//全选与非全选,计算总价

				let showGoodsList=that.showGoodsList
				let allChecked=that.allChecked
				// console.log(showGoodsList);
				for(let i=0;i<showGoodsList.length;i++){
					//用公共数组把每一项的
					// that.total+=showGoodsList[i][0][0].price*showGoodsList[i][0][0].num
					//总价格

				}
				
			})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/assets/scss/mixin.scss';
	@import '@/assets/scss/config.scss';
	@import '@/assets/scss/base.scss';
	@import '@/assets/scss/base.scss';

	.content {
		// 全局动画
		// :root {
		//   --animate-duration: 1500ms;
		//   --animate-delay: 0.9s;
		// }
		// .animate__bounce {
		// 	--animate-duration: 1300ms;
		// 	--animation-delay: 0.9s;
		// }
		width: 100%;
		@include flex(flex-start, flex-start);
		// flex-direction: column;
		background-color: aliceblue;

		.headerNavbar {
			// @include position(fixed);
			z-index: 10000;
			// box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .1);
			text-align: center;
			// margin-top: 44rpx;
		}

		// 全选框
		.chooseAllBox {
			width: 100%;
			height: 100rpx;
			background-color: #FFF;
			position:fixed;
			left: 0;
			@include flex(center, center);
			@include fontStyle($fontE, black);
			box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, .1);
			z-index: 10000;
			padding: 0 40rpx;

			.chooseAll {
				width: 50%;
				height: 100%;
				@include flex(flex-start, center);
			}

			.chooseAllEdit {
				width: 50%;
				text-align: right;
			}
		}

		// 中间内容
		.safeArea {
			width: 100%;
			height: 100%;
			margin: 100rpx auto 120rpx;
			position: relative;
			@include flex(center, flex-start);
			flex-wrap: wrap;

			.emptyBox {
				width: 100%;
				height: 100%;

				.cartAnimeBox {
					width: 100%;
					margin-top: 50%;
					text-align: center;
					padding-left: 40rpx;

					image {
						width: 200rpx;
						height: 220rpx;
					}

					//定义动画时间
					.animate__bounce {
						--animate-duration: 1300ms;
					}
				}

				.tips {
					margin-top: 40rpx;
					width: 100%;
					@include flex(center, center);
					flex-wrap: wrap;

					text {
						text-align: center;
						width: 100%;
						margin-top: 10rpx;
						@include fontStyle($fontF)
					}
				}

				.goToOrderBox {
					margin-top: 60rpx;
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					@include flex(center, center);

					.goToOrder {
						text-align: center;
						width: 30%;
						height: 100%;
						border: 1rpx solid #FFF;
						background-color: $colorA;
						@include border-radius(30rpx, 30rpx, 30rpx, 30rpx);
						@include fontStyle($fontE, #FFF);
						font-weight: bold;
						router-link{
							display: block;
							width: 100%;
							height: 100%;
						}
					}

				}

			}

			.menuListScrollHidden {
				width: 90%;
				height: 100%;
				overflow: hidden;
				white-space: nowrap;
				margin-top: 20rpx;

				/* 隐藏滚动条 */
				.menuListScroll {
					width: 100%;
					height: 100%;
					margin-top: 20rpx;
					// margin-left: 20rpx;

					.menuListBox {
						width: 100%;
						padding: 0 20rpx;
						margin-bottom: 20rpx;
						background-color: #FFF;

						// border: 1rpx solid $colorA;
						.menuListBoxtitle {
							margin-top: 20rpx;
							margin-left: 20rpx;
							width: 100%;
							height: 60rpx;
							display: inline-block;
							line-height: 60rpx;
							// background-color: $colorA;
							@include fontStyle($fontF, black);

							&::after {
								content: '';
							}
						}

						.productList {
							width: 100%;
							padding: 20rpx 0rpx;

							.productItem {
								width: 100%;
								height: 170rpx;

								@include flex(center, center);

								.productItemChoose {
									@include flex(center, center);
									flex-wrap: wrap;
									width: 40rpx;
									height: 40rpx;
									margin-right: 20rpx;
									
									image {
										width: 100%;
										height: 100%;
										border: 1px solid #efefef;
										border-radius: 50%;
										// vertical-align: text-bottom;
									}
								}

								image {
									width: 30%;
									height: 100%;

								}

								.productAttr {
									width: 60%;
									height: 100%;

									.productName,
									.productAbstract,
									.productBuy {
										width: 100%;
										padding-left: 20rpx;
										padding-right: 20rpx;
										height: 33.3%;
									}

									.productName {
										padding-top: 20rpx;
										@include fontStyle($fontE, black);
									}

									.productAbstract {
										padding-top: 10rpx;
										@include textOverFlowHidden();
										@include fontStyle($fontF);
									}

									.productBuy {
										padding-top: 14rpx;

										@include flex(flex-start, center);

										.productPrice {
											width: 30%;
											height: 50rpx;
											line-height: 40rpx;
											margin-left: 40rpx;
											@include fontStyle($fontD, black)
										}

										.productSize {
											width: 70%;
											height: 50rpx;
											line-height: 40rpx;
											@include fontStyle($fontE);
											// padding-left: 20rpx;
										}
									}

								}
							}
						}
					}


				}

			}

		}

		// 底部
		.TotalBox,
		.EditBox {
			position: fixed;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			left: 0;
			bottom: 0;
			background-color: #FFF;
			@include flex(center, center);
		}

		.TotalBox {
			padding: 0 0 0 60rpx;
			@include fontStyle($fontD, black);

			.Total {
				width: 70%;

				text {
					margin-left: 20rpx;
					color: red;
				}
			}

			.payBtn {
				color: #FFF;
				background-color: $colorA;
				border: 1rpx solid #FFF;
				width: 30%;
				height: 100%;
				text-align: center;
				@include border-radius(10rpx, 10rpx, 10rpx, 10rpx);
			}
		}

		.EditBox {
			@include fontStyle($fontD, $colorA);
			padding: 0 40rpx;

			text {
				width: 50%;
				text-align: center;
			}

			.myfavorite {
				width: 50%;
				display: block;
				text-align: center;
			}
		}
	}
</style>
